<template>
    <div>
        <el-dialog :title="title" :visible.sync="visible" :width="width" :before-close="handleClose" append-to-body>
            <el-form  :model="userForm" :rules="rules" ref="ruleForm" label-width="140px">
            <!-- 新增 -->
            <div v-if="titleFlag == '1' ">
                    <el-form-item label="手机号" prop='cellphone'>
                        <el-input v-model="userForm.cellphone" placeholder="请输入手机号" />
                    </el-form-item>
                    <el-form-item label="邀请人ID">
                        <el-input v-model="userForm.referralParentUserId" placeholder="请输入邀请人ID" />
                    </el-form-item>
            </div>
            <!-- 修改角色 -->
            <div v-if="titleFlag == '2' ">
                    <el-form-item label="手机号"> {{viewForm.cellphone}} </el-form-item>
                    <el-form-item label="原角色"> {{viewForm.roleLevel | userRoleLevel}} </el-form-item>
                    <el-form-item label="新角色">
                        <el-select v-model="userForm.roleLevel">
                            <el-option label="会员" value="2-0"></el-option>
                            <el-option label="经理" value="2-1741"></el-option>
                            <el-option label="经销商" value="2-1742"></el-option>
                        </el-select>
                    </el-form-item>
            </div>
            <!-- 修改网体级别 -->
            <div v-if="titleFlag == '3' ">
                    <el-form-item label="手机号">
                        {{viewForm.cellphone}}
                    </el-form-item>
                    <el-form-item label="原网体级别">
                        {{viewForm.fttLevel}}
                    </el-form-item>
                    <el-form-item label="新网体级别">
                        <el-select v-model="userForm.fttLevel">
                            <el-option label="F0" value="F0"></el-option>
                            <el-option label="F1" value="F1"></el-option>
                            <el-option label="F2" value="F2"></el-option>
                            <el-option label="F3" value="F3"></el-option>
                            <el-option label="F4" value="F4"></el-option>
                            <el-option label="F5" value="F5"></el-option>
                            <el-option label="F6" value="F6"></el-option>
                            <el-option label="F7" value="F7"></el-option>
                        </el-select>
                    </el-form-item>
            </div>
            <!-- 修改辅导员 -->
            <div v-if="titleFlag == '4' ">
                    <el-form-item label="手机号">
                        {{viewForm.cellphone}}
                    </el-form-item>
                    <el-form-item label="辅导员ID">
                        <el-input v-model="userForm.parentUserId" placeholder="请输入辅导员ID" />
                    </el-form-item>
            </div>
            <!-- 绑定中军手机卡 -->
            <div v-if="titleFlag == '5' ">
                    <el-form-item label="手机号">
                        {{viewForm.cellphone}}
                    </el-form-item>
                    <el-form-item label="绑定中军手机卡" prop='cellphone'>
                        <el-input v-model="userForm.cardzCellphone" placeholder="请输入中军手机卡" />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="userForm.cardzState">
                            <el-option label="等待" value="pending"></el-option>
                            <el-option label="成功" value="success"></el-option>
                            <el-option label="失败" value="failure"></el-option>
                        </el-select>
                    </el-form-item>
            </div>
            <!-- 修改手机号 -->
            <div v-if="titleFlag == '6' ">
                    <el-form-item label="手机号" prop='cellphone'>
                        <el-input v-model="userForm.cellphone" placeholder="请输入手机号" />
                    </el-form-item>
            </div>
            <!-- 状态 -->
            <div v-if="titleFlag == '7' ">
                    <el-form-item label="状态">
                        <el-select v-model="userForm.state">
                            <el-option label="正常" value="normal"></el-option>
                            <el-option label="禁言" value="muted"></el-option>
                            <el-option label="禁止" value="banned"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="userForm.memo" placeholder="请输入备注" />
                    </el-form-item>
            </div>
            <div v-if="titleFlag == '8' ">
                    <el-form-item label="手机号" prop='cellphone'>
                        <el-input v-model="userForm.cellphone" placeholder="请输入手机号" />
                    </el-form-item>
            </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="SubmitForm(userForm)">确 定</el-button>
                <el-button @click="userCancel(userForm)">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        props:{
            title:{
                type:String,
                default:''
            },
            titleFlag:{
                type:String,
                default:''
            },
            visible:{
                type:Boolean,
                default:false
            },
            width:{
                type:String,
                default:''
            },
            ruleForm:{
                type:String,
                default:''
            },
            userForm:{
                type:Object,
                default:()=>{}
            },
            viewForm:{
                type:Object,
                default:()=>{}
            }
        },
        data(){
            return {
                rules:{
                    cellphone:[{required: true, message: "手机号不能为空", trigger: "blur"},
                        {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: "请输入正确的手机号码",
                            trigger: "blur"
                        }
                    ]
                },
            }
        },
        
        methods:{
           handleClose(){
                this.$refs['ruleForm'].clearValidate();
                this.$emit('closeDialog')
                
           },
           userCancel(userForm){
                this.$refs['ruleForm'].clearValidate();
                this.$emit('userCancelChild',userForm)
                
                
           },
           SubmitForm(userForm){
                this.$refs['ruleForm'].validate((valid) => {
                    if(valid){
                        this.$emit('submitFormChild',userForm)
                    }
                })
                
                
                
           }
        }
    }
</script>
<style>
</style>